<!--继承公共模板-->
<extend name="Layout:jqweui"/>
<!--网页标题-->
<block name="title">图片点击放大左右滑动功能</block>

<!--内部样式-->
<block name="import_head">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/common/hr/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/common/hr/css/weui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/common/hr/css/jquery-weui.css">
    <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/2.5.1/vconsole.min.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/common/hr/css/swiper.min.css">
</block>

<!--内部样式-->
<block name="style">
    <style>
        .swiper-container {
            width: 100%;
            /*height: 300px;*/
        }
        .swiper-slide{
            width: 100%;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .swiper-Bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 1);
            /*display: none;*/
            z-index: 999;
        }
        .swiper-pagination-bullet{
            background: #999999;
        }
        .swiper-pagination-bullet-active{
            background: #007aff;
        }
        .swiper-pagination{
            width: 100%;
            position: absolute;
            bottom: 10%;
        }
        .swiper-pagination span{
            margin: 0 5px;
            box-sizing: border-box;
        }
        .swiper-slide{
            position: relative;
            margin-top: 50%;
        }
    </style>
</block>

<!--页面内容-->
<block name="page">
    <div class="swiper-Bg">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="__PUBLIC__/common/hr/img/6-1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="__PUBLIC__/common/hr/img/4.png" alt=""></div>
                <div class="swiper-slide"><img src="__PUBLIC__/common/hr/img/5.png" alt=""></div>
                <div class="swiper-slide"><img src="__PUBLIC__/common/hr/img/6.png" alt=""></div>
                <div class="swiper-slide"><img src="__PUBLIC__/common/hr/img/7.png" alt=""></div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>

</block>

<!--尾部引入-->
<block name="import_foot">
    <script src="__PUBLIC__/common/hr/js/jquery-3.3.1.min.js"></script>
    <script src="__PUBLIC__/common/hr/js/jquery-weui.min.js"></script>
    <script src="__PUBLIC__/common/hr/js/swiper.min.js"></script>
    <script src="__PUBLIC__/common/hr/js/city-picker.min.js"></script>
    <script src="__PUBLIC__/common/hr/js/swiper.min1.js"></script>
</block>

<!--js代码-->
<block name="script">
    <script type="text/javascript">
        // var arr = [];
        // //获取全部图片的src
        // $('img').each(function(){
        //     arr.push($(this).attr('src'));
        // })
        // var img = new Image()
        // // 改变图片的src
        // img.src = img_url
        // // 加载完成执行
        // img.onload = function(){
        //     // 打印
        //     console.log('width:'+img.width+',height:'+img.height)
        // }
        // //获取全部img标签
        // var img=$("img");
        // //遍历所有标签和后台交互重新为src赋值
        // for(var i=0;i<arr.length;i++){
        //     $("img")[i].src="http://uiq5gd.natappfree.cc/WeiXinSSM/wei/getImg?addr="+arr[i];
        // }


        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        })
    </script>
</block>

